<template>
  <div class="fixtool" @click="goTop" v-show="y>=800" >
      <i class="iconfont icon-angle-down"></i>
    </div>
</template>

<script>
import { ref, watch,getCurrentInstance,onMounted,onDestroyed, proxy } from 'vue'
import {useWindowScroll} from '@vueuse/core'
export default {
    name:'TiziFixtool',
    setup() {
        // 滚动
  
    const {proxy} = getCurrentInstance()
    const handleScroll = () => {
      const scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      proxy.scrollTop = scrollTop
    }

    const goTop = () => {
      const timer = setInterval(() => {
        const ispeed = Math.floor(-proxy.scrollTop / 10)
        document.documentElement.scrollTop = document.body.scrollTop = proxy.scrollTop + ispeed
        if (proxy.scrollTop === 0) {
          clearInterval(timer)
        }
      },10)
    }
    const {y} = useWindowScroll()
    return {proxy,handleScroll,goTop,y}
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
    destroyed() {
        document.removeEventListener('scroll', this.handleScroll)
    }
}
</script>

<style lang="less" scoped>
.fixtool {
        position: fixed;
        top: 600px;
        right: 48%;
        margin-right: -676px;
        width: 60px;
        height: 60px;
        transform:rotate(180deg);
        border-radius: 50%;
        // background-color: #e5e5e5;
        i {
          font-size: 36px;
          line-height: 60px;
    }
}
.fixtool:hover {
          background-color: #e5e5e5;
        }
</style>